<template>
  <div class="enroll">
    <van-nav-bar title="注册">
      <template #left>
        <van-icon name="cross" @click="getAway"/>
      </template>
    </van-nav-bar>

    <div class="content">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round type="info" native-type="submit" @click="add"
            >注册</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: "enroll",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      //   console.log("submit", values);
    },
    getAway() {
this.$router.go(-1);
    },
    add() {
        var localChatData = localStorage.getItem("pageIndex");
      if (this.username == "" || this.password == "") {
        return;
      } else {
        if (!localChatData) {
          localChatData = [];
        } else {
          localChatData = JSON.parse(localChatData);
        }

        let pageData = {
          userhome:this.username,
          userpassword:this.password
          
        }
        localChatData.push(pageData);
        
        // console.log(res);
        
        localStorage.setItem("userInfo", JSON.stringify(localChatData));
        Toast("注册成功");

        setTimeout(() => {
          this.$router.push({name:'Login'});
      }, 2000);
      }

      
    },
  },
};
</script>

<style lang="less" scoped>
.van-icon-cross:before {
  color: darkgray;
}
.van-button {
  // width: 300px;
  width: 100%;
  display: block;
  margin: 10px auto;
}
.content {
  margin-top: 170px;
}
.enroll {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
}
</style>